{% extends "base.html" %}
{% block css %}
    <link href="../static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
{% endblock %}
{% block header_content %}
    <section id="searchbar" class="box info">
        <form id="searchform">

            <label for="sc">查询内容</label>
            <input type="search" class="ac_comm" name="sc" value="{{ sc or '' }}" placeholder="单位、光缆名称/编码、领用/经办人、备注" size="40">
            <label for="inputstart">日期</label>
            <input class="form_datetime" name="inputstart" size="10" readonly="readonly">
            -
            <input class="form_datetime" name="inputend" size="10" readonly="readonly">
            <select name="pc">
                <option value="25">25</option>
                <option value="100">100</option>
                <option value="0">All</option>
            </select>
            <select name="gis">
                <option value="">全部</option>
                <option value="0">否</option>
                <option value="1">是</option>
            </select>
            <button id="searchbutton" type="button" class="ym-button">查询</button>
            <button id="searchbutton" type="reset" class="ym-button">清空</button>

        </form>
    </section>
{% endblock %}
{% block content %}
    <section id="searchcontent" class="ym-grid linearize-level-1"></section>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="../static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../static/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $(".form_datetime").datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose:true,
            todayBtn:true,
            todayHighlight:true,
            language:'zh-CN',
            minView:'month',
            viewMode:'month'
        });
    </script>
    <script type=text/javascript>
        $(function() {
            p=1;
            function vi(p){
                $.get($SCRIPT_ROOT + '/card_list?page='+p+'&'+ $("#searchform").serialize(), function(data) {
                    $("#searchcontent").html(data);
                    $("#pagebar a").click(function(e){//对分页栏中的a元素进行操作
                        e.preventDefault();//阻止a的原先事件
                        vi($(this).attr("id"));//根据获取的页码值调用显示页面函数
                    });
                    $("#page_go").click(function(e){//对分页栏中的input元素进行操作
                        e.preventDefault();
                        if (isNaN($("#page_val").val())||$.trim($("#page_val").val())==""){//判断输入的是否是数字
                            alert("输入的页码错误，请输入正确页码！");
                            $("#page_val").select();
                            return false;//页码值不是数字则退出；
                        }
                        vi($("#page_val").val());
                    });
                    var chk=$(".checkid");
                    $("#checkall").click(function(){
                      chk.prop("checked",$(this).prop("checked"));//根据全选的checkbox状态来填充单个checkbox状态
                      //$(this).prop("checked") ? chk.closest("tr").addClass("chk") : chk.closest("tr").removeClass("chk")//判断是否全部选中，选中则增加chk样式，没选中则删除chk样式，不能用toggleClass方法，由于下面单个checkbox会改变全选的checkbox状态
                    });
                    chk.click(function(){
                      if(!$(this).prop("checked")) $("#checkall").prop("checked",false);//如果当前checkbox状态为未选中则全选的checkbox也设置为未选中
                      //$(this).closest("tr").toggleClass("chk");//单个切换当前checkbox存在的tr的chk样式
                    });
                    $("#useprint").click(function(){
                        var ids=$(".checkid:checked").map(function(){return this.value}).get().join();
{#                        var ids=$(".checkid:checked").map(function(_,el){return $(el).val()}).get().join();#}
                        console.log(ids);
                        if(ids){
                            $.post('/useprint',{ids:ids},function(res){
                                var obj=window.open("about:blank");
                                obj.document.write(res);
                            });
                        }

                    });
                    $("#useprint_word").click(function(){
                        var ids=$(".checkid:checked").map(function(){return this.value}).get().join();
{#                        var ids=$(".checkid:checked").map(function(_,el){return $(el).val()}).get().join();#}
                        console.log(ids);
                        if(ids){
                            window.location="/useprint?ids="+ids;
                        }

                    });



                });



            }
            $('#searchbutton').bind('click', function() {
                vi(p);
            });
            vi(p);


        });
    </script>
{% endblock %}